import React from "react";
import './index.scss'
import { Menu, Button  } from 'antd';
import MusicBot from "../MusicBot/MusicBot";
import FindMusic from "../FindMusic/FindMusic";
import SearchMusic from "../searchMusic/SearchMusic";
import PlayListPage from "../PlayList/PlayList";


import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    Redirect
} from "react-router-dom";

const { SubMenu } = Menu;


class Index extends React.Component{

    constructor(props) {
        super(props);
        this.state = {

        }

    }


    render() {
        return(
            <div className="Index">
                <div className="Index-Content" id="App_Content">
                    <Menu
                        className="IndexMenu"
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['sub1']}
                        mode="inline"
                        inlineCollapsed={this.state.collapsed}
                    >
                        <Menu.Item key="1">发现音乐</Menu.Item>
                        <Menu.Item key="2">视频</Menu.Item>
                        <Menu.Item key="3">朋友</Menu.Item>
                        <Menu.Item key="4">直播</Menu.Item>
                        <Menu.Item key="5">私人FM</Menu.Item>
                        <li className="MyMusic">我的音乐</li>
                    </Menu>
                    <div className="Content-Right">
                        <Switch>
                            <Route exact path="/" >
                                <FindMusic history={this.props.history}></FindMusic>
                            </Route>
                            <Route exact path="/Search/:name">
                                <SearchMusic></SearchMusic>
                            </Route>
                            <Route exact path="/PlayList/:id">
                                <PlayListPage></PlayListPage>
                            </Route>
                        </Switch>
                    </div>
                </div>
                <div className="MusicBoot">
                    <MusicBot></MusicBot>
                </div>
            </div>
        )
    }
}

export default Index;